<template>
  <div class="sip-batch-manage">
    <div class="prompt">温馨提示：SIP号查询时查询结果为网关类型的SIP号</div>
    <div class="margin-t-15">
      <div>起始SIP号：</div>
      <div class="margin-t-7">
        <el-input style="width: 140px" v-model="startInput" placeholder="请输入内容"></el-input> —— <el-input style="width: 140px" v-model="endInput" placeholder="请输入内容"></el-input>
      </div>
    </div>
    <div class="margin-t-15">
      <div>SIP号状态：</div>
      <div class="margin-t-7">
        <el-select v-model="sipStatus" placeholder="请选择">
          <el-option label="全部" value="all"></el-option>
          <el-option label="已绑定SIP号" value="bind"></el-option>
          <el-option label="未绑定SIP号" value="unBind"></el-option>
        </el-select>
        <el-button type="primary" @click.stop="searchSip" class='primary_btn'>查询</el-button>
      </div>
    </div>
    <div class="margin-t-15">
      <el-table :data="listData" size="mini" highlight-current-row stripe style="width: 100%">
        <el-table-column label="SIP号"><template scope="scope">{{ scope.row.Exten }}</template></el-table-column>
        <el-table-column label="座席(工号)"><template scope="scope"><agent :id="scope.row.UserID" isNum ></agent></template></el-table-column>
        <el-table-column label="编码"><template scope="scope">{{ scope.row.Allow }}</template></el-table-column>
      </el-table>
    </div>
    <div class="margin-t-15">
      <span>操作：</span>
      <el-radio-group v-model="operate">
        <el-radio label="exten">批量绑定工号</el-radio>
        <el-radio label="code">批量修改编码</el-radio>
      </el-radio-group>
    </div>
    <div class="margin-t-15">
      <div v-text="operate === 'exten' ? '起始工号：' : '输入编码：'"></div>
      <div class="margin-t-7" v-if="operate === 'exten'">
        <el-input style="width: 100px" v-model="startExten" placeholder="开始工号" @blur="checkStartExten"></el-input> ——
        <el-input style="width: 100px" v-model="endExten" placeholder="结束工号" @blur="checkStartExten"></el-input><span>已输入{{num}}个座席</span>
      </div>
      <div class="margin-t-7" v-else>
        <el-checkbox-group v-model="checkList">
          <el-checkbox label="alaw">alaw</el-checkbox>
          <el-checkbox label="ulaw">ulaw</el-checkbox>
          <el-checkbox label="g729">g729</el-checkbox>
          <el-checkbox label="speex">speex</el-checkbox>
          <el-checkbox label="gsm">gsm</el-checkbox>
          <el-checkbox label="ilbc">ilbc</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <el-dialog title="提示" :visible.sync="isShowSipTip" width="40%" append-to-body>
      <div>您当前提供的座席数量与SIP号数量不一致，已选择SIP号<span class="pink">{{listData.length}}</span>个，座席工号<span class="pink">{{num}}</span>个，请确定是否需要部分绑定！</div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowSipTip = false" class='primary_btn'>取 消</el-button>
        <el-button type="primary" @click="saveClick" class='primary_btn'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import Agent from '@/components/public-modules/cache/Agent'
  export default {
    name: 'sipBatchManage',
    data () {
      return {
//        agents: [],
        isShowSipTip: false,
        checkList: [],
        num: 0,
        startExten: '',
        endExten: '',
        operate: 'exten',
        listData: [],
        sipStatus: 'all',
        startInput: '',
        endInput: ''
      }
    },
    props: {
    },
    components: {
      Agent
    },
    computed: {
      pbx () {
        return this.$store.state.config.callCenter.currentPBX
      },
      agents () {
        if (this.$store.state.session.ivrMap && this.$store.state.session.ivrMap[this.pbx]) {
          let that = this
          let _account = this.$store.state.session.ivrMap[this.pbx].data.account_user
          return (_account || []).filter((item) => {
            return that.pbx === item.pbx && item.status === 'enable'
          })
        } else {
          return []
        }
      }
    },
    methods: {
      resetFormData () {
        this.startExten = ''
        this.endExten = ''
        this.operate = 'exten'
        this.sipStatus = 'all'
        this.startInput = ''
        this.endInput = ''
        this.checkList = []
        this.listData = []
        this.num = 0
      },
      checkStartExten () {
        let reg = new RegExp('^[0-9]{4,5}$')
        if (reg.test(this.endExten) && (parseInt(this.startExten) <= parseInt(this.endExten)) && this.startExten) {
          var sessionAgent = this.agents
          var agents = []
          var list = []
          for (let m = 0; m < sessionAgent.length; m++) {
            if (sessionAgent[m].status !== 'disable') {
              agents.push(sessionAgent[m].exten)
            }
          }
          for (let i = this.startExten; i <= this.endExten; i++) {
            if (agents.indexOf(i + '') === -1) {
            } else {
              list.push(i)
            }
          }
          this.num = list.length
        } else {
          this.num = 0
          this.$message.error('起始工号不能为空、结束工号必须为4位或5位数字并且结束工号必须大于起始工号!')
        }
      },
      saveClick () {
        this.batchDispath()
      },
      checkSip () {
        if (this.startInput !== '' && !(this.startInput >= 20000000 && this.startInput < 300000000)) {
          this.$message.error('起始Sip号必须为8位数字必须大于20000000小于30000000')
          return false
        }
        if (this.endInput !== '' && !(this.endInput >= 20000000 && this.endInput < 300000000)) {
          this.$message.error('结束Sip号必须为8位数字必须大于20000000小于30000000')
          return false
        }
        return true
      },
      saveBatch () {
        if (this.listData.length === 0) {
          this.$message.error('查询结果为空，无法绑定')
          return
        }
        if (this.operate === 'exten') {
          this.handleBatchExten()
        } else {
          this.handleBatchCode()
        }
      },
      handleBatchCode () {
        if (!this.checkSip()) {
          return
        }
        let data = {
          codes: this.checkList,
          sipBegin: this.startInput,
          sipEnd: this.endInput,
          pbx: this.pbx,
          Account: this.$store.state.session.account.account,
          Allow: this.checkList.toString()
        }
        this.$store.dispatch('batchUpdateCodes', data).then(resp => {
          if (resp && resp.success) {
            this.$message.success('批量修改编码成功！')
            this.$emit('batchBindSuccess')
          }
        })
      },
      handleBatchExten () {
        let reg = new RegExp('^[0-9]{4,5}$')
        if (reg.test(this.startExten) && reg.test(this.endExten) && (parseInt(this.startExten) <= parseInt(this.endExten))) {
          if (!this.checkSip()) {
            return
          }
          if (this.listData.length > this.num) {
            this.isShowSipTip = true
          } else {
            this.batchDispath()
          }
        } else {
          this.$message.error('请填写正确的起始工号!')
        }
      },
      batchDispath () {
        let data = {
          type: this.sipStatus,
          sipBegin: this.startInput,
          sipEnd: this.endInput,
          Account: this.$store.state.session.account.account,
          pbx: this.pbx,
          extenBegin: this.startExten,
          extenEnd: this.endExten
        }
        this.$store.dispatch('batchBindGatewayUserExten', data).then(resp => {
          if (resp && resp.success) {
            this.$message.success('批量绑定工号成功！')
            this.isShowSipTip = false
            this.$emit('batchBindSuccess')
          }
        })
      },
      searchSip () {
        let reg = new RegExp('^2[0-9]{7}$')
        if (this.startInput !== '' && !reg.test(this.startInput)) {
          this.$message.error('起始Sip号必须为8位数字且以2开头')
          return
        }
        if (this.endInput !== '' && !reg.test(this.endInput)) {
          this.$message.error('结束Sip号必须为8位数字且以2开头')
          return
        }
        let data = {
          type: this.sipStatus,
          sipBegin: this.startInput,
          sipEnd: this.endInput,
          Account: this.$store.state.session.account.account,
          pbx: this.pbx
        }
        this.$store.dispatch('queryBatchSips', data).then(resp => {
          if (resp && resp.success) {
            this.listData = []
            this.count = resp.list.length
            if (resp.list.length !== 0) {
              for (let i = 0; i < resp.list.length; i++) {
                let _obj = resp.list[i]
                this.listData.push(_obj)
              }
            }
          }
        })
      }
    },
    beforeMount () {
//      this.$store.dispatch('getCache', {type: 'agents'}).then((res) => {
//        this.agents = res || []
//      })
    }
  }
</script>

<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .pink
    color $c-pink
  .primary_btn
    margin-left 10px
  .prompt
    color $c-prompt
  .margin-t-7
    margin-top 7px
  .margin-t-15
    margin-top 15px
</style>
